上傳檔案其實還有蠻多議題可以討論，那我們今天就一一道來ＸＤ

顯示上傳進度

檔案上傳昨天我們有提到，可以用FormData的型式，透過API傳給後端。
由於新版的XMLHttpRequest的優化，XMLHttpRequest提供progress事件，可以提供進度資訊。檔案傳輸下載或上傳時，可以利用progress事件知道目前的進度。
今天我們要使用的範例是使用axios，不同的方法語法上有些許不同，不過概念上都是一樣的。透過progress事件，取得上傳進度。

HTML

<input type="file" @change="updateFile">
<button @click="submit">上傳</button>
<p>上傳進度： {{progress}}</p>

Javascript

// 選取檔案
updateFile(e){
    this.file = e.target.files[0];

},
//上傳檔案
submit(){
    let  fd = new FormData()
    form.append('file', this.file)
    
    let config = {
        onUploadProgress: progressEvent => {
            let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) '%'
            this.progress = complete
        }
    }
    axios.post(`APIURL`,fd, config).then((res) => {
        if (res.data.status === 'success') {
            console.log('上傳成功')
        }
    })
}

Checksum 校驗碼

Checksum，也可以稱雜湊碼（hash sum)。是透過雜湊演算法(Ex.MD5、SHA-1、CRC32、SHA-256...)計算而成一個獨一無二的數字文字組合。只要input相同，透過同樣的演法計算，output的checksum一定相同。在上傳檔案時，會用checksum用來檢查檔案是否完整或正確。

分片上傳

分片上傳的意思是：我們會把檔案做切割，分成一塊一塊的小分片，上傳至後端，再由後端合併起來。

1個檔案 = 多個block
1的block = 多個chunk（片)

chunk只是上傳時的臨時單位，一般server會設計在固定的時間清除沒有被合併成檔案的chunk

為什麼要這麼麻煩呢？又要怎麼做呢？接下來介紹一下分片上傳的概念～

為什麼整的檔案上傳如果太大會失敗？為什麼需要分片上傳

1. server配置：server端可能會配置每個request的最大資料量，若超過這個配置request就會失敗。EX.PHP中預設設定post_max_size："8M"、Apache預設限制上傳檔案的大小為2M...等等，超過定義大小的request就會失敗。
2. request timeout: 發出request後，得到response的時間大於server端設定的response時間，也會失敗。
3. 網路不穩定：不可控制的因素，但卻是最常見的。

分片上傳的優點

1. 解決檔案過大會上傳失敗的問題。
2. 當檔案分片後，可以將不同分片同時上傳，增加傳輸速度。
3. 分片的檔案會一塊快上傳至server，若中斷傳輸，server已保留前面上傳的檔案，可以從還沒上傳的部分再進行，達到續傳的效果。

由於每種程式的寫法可能會有些許差異，今天我們就介紹分片上傳的流程想法～

流程想法

1. 選取檔案，取得檔案物件，轉換成arrayBuffer（後面需要切割使用，因此先轉成arrayBuffer，還記得嗎？我們前幾天有聊過，若非對整個檔案的操作建議轉成arrayBuffer）
2. 建立檔案，轉化成切片（可使用固定的大小做切片，EX：每個切片2M，可使用slice)
   • 建議每個切片小於10M
3. 初始化切片上傳任務，意即：將每個分片透過雜湊演算法，取得checksum，成為這個分片的唯一ID，後續上傳時帶上此ID
4. 開始上傳分片，上傳時帶上分片大小、分片唯一ID等等訊息，直到所有分片上傳完成
5. 當前端分片完成後，通知後端，後端再進行檔案合併

檔案上傳真的蠻多東西可以探討，包含續傳、秒傳等等，
但只要大概理解這些檔案相關的觀念，在實作上都可以更容易地去應用開發～～

REF

• https://www.gushiciku.cn/pl/glEe/zh-tw
• https://javascript.info/resume-upload
• https://iter01.com/605391.html